<template>
  <div class="index" @touchstart.stop.prevent="handleTouchStart"
    @touchmove.stop.prevent="handleTouchMove"
    @touchend.stop.prevent="handleTouchEnd"
    @mousedown.stop.prevent="handleMouseDown"
    @mousemove.stop.prevent="handleMouseMove"
    @mouseup.stop.prevent="handleMouseUp">
    <div
      data-intro="下拉微信页面"
      data-step="1"
      class="date"
    ></div>
    <div class="click_anime"></div>
  </div>
</template>

<script>
import "@/styles/guideHelper.css"; /* 引入共享样式 */
// import "driver.js/dist/driver.css";
import introJs from "intro.js";
import "intro.js/introjs.css";
export default {

  data() {
    return {
      touchStartY: 0,
      touchEndY: 0,
      isMouseDown: false,
      mouseStartY: 0,
      mouseEndY: 0,
      threshold: 50, // 滑动距离的阈值

      intro: null,
      driverObj: null,
      guideTimeout: null, // 用于存储 setTimeout 的 ID
    };
  },
  created() {
    this.guideTimeout = setTimeout(() => {
      this.$nextTick(() => {
        this.stopIntro();
        this.stopDriver();
          this.startIntro(); // 等待一秒后执行
      });
    }, 1000);
  },
  // 页面加载时触发
  mounted() {
    // 阻止点击其他区域取消引导
    document.addEventListener("click", this.preventIntroExit, true);
  },
  // 页面关闭时触发
  beforeDestroy() {
    if (this.guideTimeout) {
      clearTimeout(this.guideTimeout); // 清除定时器
    }
    this.stopIntro();
    this.stopDriver();
    document.removeEventListener("click", this.preventIntroExit, true);
  },
  methods: {
     // 手机端：触摸开始
     handleTouchStart(event) {
      this.touchStartY = event.touches[0].clientY;
    },
    // 手机端：触摸移动
    handleTouchMove(event) {
      this.touchEndY = event.touches[0].clientY;
    },
    // 手机端：触摸结束
    handleTouchEnd() {
      const deltaY = this.touchEndY - this.touchStartY;
      if (deltaY > this.threshold) {
        this.go(); // 向下滑动超过阈值时，触发 go 方法
      }
    },
    // Web端：鼠标按下
    handleMouseDown(event) {
      this.isMouseDown = true;
      this.mouseStartY = event.clientY;
    },
    // Web端：鼠标移动
    handleMouseMove(event) {
      if (this.isMouseDown) {
        this.mouseEndY = event.clientY;
      }
    },
    // Web端：鼠标松开
    handleMouseUp() {
      if (this.isMouseDown) {
        const deltaY = this.mouseEndY - this.mouseStartY;
        if (deltaY > this.threshold) {
          this.go(); // 向下滑动超过阈值时，触发 go 方法
        }
        this.isMouseDown = false; // 重置状态
      }
    },
    // 进入下一个页面
    go() {
      this.$router.push({
        path: "/health/register/wx/index39",
      });
    },
    // 去结尾页
    goEnd() {
      this.$router.push({
        path: "/end/end1",
      });
    },

    // 停止页面引导
    stopIntro() {
      if (this.intro) {
        this.intro.exit();
        this.intro = null;
      }
    },
    // 停止点击引导
    stopDriver() {
      if (this.driverObj) {
        this.driverObj.destroy();
        this.driverObj = null;
        // 移除所有附加的类
        const paths = document.querySelectorAll("path.show-path");
        const click = document.querySelector(".click_anime.isShow");

        if (paths.length) {
          paths.forEach((path) => {
            path.classList.remove("show-path");
          });
        }

        if (click) {
          click.classList.remove("isShow");
        }
      }
    },

    // 页面引导
    startIntro() {
      this.intro = introJs();
      this.intro.setOptions({
        prevLabel: "上一步", //上一步按钮
        nextLabel: "下一步", //下一步按钮
        doneLabel: "结束", //结束按钮
        disableInteraction: true, // 禁用用户交互
        position: "left",
      });

      // 处理步骤切换
      this.intro.onafterchange(() => {
        clearInterval(this.interval);

        // 获取当前步骤
        const currentStep = this.intro._currentStep;
        console.log("currentStep", currentStep);

        // 隐藏 "上一步" 和 "下一步" 按钮
        // const prevButton = document.querySelector(".introjs-prevbutton");
        const nextButton = document.querySelector(".introjs-nextbutton");

        // 如果是第一步，隐藏 "上一步" 按钮
        if (currentStep === 0) {
          // prevButton.style.display = "none";
          nextButton.style.display = "none";
        }
      });

      this.intro.onexit(() => {
        clearInterval(this.interval);
      });
      setTimeout(() => {
        const click = document.querySelector(".click_anime");
        click.classList.add("isShow");
      }, 2000);
  

      this.intro.start();
    },
    preventIntroExit(event) {
      // 获取 intro.js overlay
      const overlay = document.querySelector(".introjs-overlay");
      if (overlay && event.target === overlay) {
        event.stopPropagation();
        event.preventDefault();
      }
    },
  },
};
</script>

<style scoped lang="less">
.index {
  z-index: 100000000;
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/health/register/wx/41.jpg) no-repeat top;
  background-size: 100% 100%;
}

@media screen and (min-width: 440px) {
  .list {
    position: absolute;
    bottom: 5px;
    left: 20px;
    width: 360px;
    height: 300px;
  }
  .search {
    position: absolute;
    top: 95px;
    left: 100px;
    width: 270px;
    height: 35px;
  }

  .screen {
    position: absolute;
    top: 150px;
    left: 25px;
    width: 355px;
    height: 35px;
  }
  .click {
    position: absolute;
    top: 415px;
    left: 20px;
    width: 360px;
    height: 85px;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 415px;
    left: 150px;
    width: 75px;
    height: 75px;
    background-image: url("@/assets/click.gif");
    background-size: 100% 100%;
    // transform: scale(1.2) rotateY(180deg);
  }
}
@media screen and (max-width: 440px) {
  .date {
    position: absolute;
    top: 4%;
    left: 2.5vw;
    width: 96vw;
    height: 95%;
  }
  .doctor {
    position: absolute;
    top: 4%;
    left: 2.5vw;
    width: 96vw;
    height: 95%;
  }
  .click {

    position: absolute;
    top: 4%;
    left: 2.5vw;
    width: 96vw;
    height: 95%;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 1%;
    left: 50vw;
    width: 80px;
    height: 270px;
    background-image: url("@/assets/bottom.gif");
    background-size: 100% 100%;
    transform: scale(1.2);
  }

}
</style>
